<template>
  <div>
    <div class="home-container">
      <div class="coontainer">
        <div class="inspection" style="padding-left: 20px"><van-icon name="arrow-left" @click="goBack" /></div>
        <div class="inspection" style="flex: 1; text-align: center; margin-left: -20px">详情</div>
      </div>
    </div>
    <div class="content" :style="{ height: windowHeight + 'px', overflowY: 'auto', fontSize: isPad ? '14px' : '12px' }">
      <div class="">
        <van-collapse v-model="activeNames1">
          <van-collapse-item title="商品信息" name="1" :class="isPad ? '' : 'noPad'">
            <van-row class="row" type="flex">
              <van-col span="3" class="infoTitle">款号：</van-col>
              <van-col span="9" class="infoValue" style="display: flex"
                >{{ spxxInfo.itemNo }}
                <div class="btn3">QC查货报告</div>
              </van-col>
              <van-col span="3" class="infoTitle">供应商：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.vendorName }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">收货数量：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.arrivalQty }}</van-col>
              <van-col span="3" class="infoTitle">质检数量：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.totaliQty }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">到货箱数：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.boxesQty }}</van-col>
              <van-col span="3" class="infoTitle">签收日期：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.signingTime }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">申请日期：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.submitTime }}</van-col>
              <van-col span="3" class="infoTitle">国家：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.overSeasign }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">PO单号：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.poKey }}</van-col>
              <van-col span="3" class="infoTitle">质检号：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.qcheckNo }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">质检员：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.qcUserName }}</van-col>
              <van-col span="3" class="infoTitle">检验日期：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.dateTime }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">小类：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.smallClass }}</van-col>
              <van-col span="3" class="infoTitle">款式种类：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.styleClass }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">跟单员：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.followName }}</van-col>
              <van-col span="3" class="infoTitle">品控审核：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.processName }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">总计划数量：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.planTotalQty }}</van-col>
              <van-col span="3" class="infoTitle">送货批次：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.productBatch }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="3" class="infoTitle">特殊工艺：</van-col>
              <van-col span="9" class="infoValue">{{ spxxInfo.specialFlag }}</van-col>
              <van-col span="4" class="infoTitle">计划检验项目：</van-col>
              <van-col span="8" class="infoValue">{{ spxxInfo.testProject }}</van-col>
            </van-row>
            <van-row class="row">
              <van-col span="4" class="infoTitle">内外检最终效果：</van-col>
              <van-col span="8" class="infoValue">{{ spxxInfo.testResult }}</van-col>
            </van-row>
          </van-collapse-item>
        </van-collapse>
        <div class="jcxx mt20">
          <van-collapse v-model="activeNames2">
            <van-collapse-item title="检测信息" name="1" :class="isPad ? '' : 'noPad'">
              <van-row class="tableRow tableHead">
                <van-col class="col" span="2">序号</van-col>
                <van-col class="col" span="2">颜色</van-col>
                <van-col class="col" span="2">尺码</van-col>
                <van-col class="col" span="3">检测类型</van-col>
                <van-col class="col" span="3">检测批次</van-col>
                <van-col class="col" span="3">特艺信息</van-col>
                <van-col class="col" span="3">不合格项目</van-col>
                <van-col class="col" span="3">报告时间</van-col>
                <van-col class="col" span="3">检测结果</van-col>
              </van-row>
              <div v-if="spxxInfo.testInfos.length != 0">
                <van-row class="tableRow" v-for="(jItem, jIndex) in spxxInfo.testInfos" :key="jIndex">
                  <van-col class="colb" span="2">{{ jIndex + 1 }}</van-col>
                  <van-col class="colb" span="2">{{ jItem.color }}</van-col>
                  <van-col class="colb" span="2">{{ jItem.sizeNo }}</van-col>
                  <van-col class="colb" span="3">{{ jItem.testType }}</van-col>
                  <van-col class="colb" span="3">{{ jItem.testNo }}</van-col>
                  <van-col class="colb" span="3">{{ jItem.specialInfo }}</van-col>
                  <van-col class="colb" span="3">{{ jItem.badInfo }}</van-col>
                  <van-col class="colb" span="3">{{ jItem.reportTime | formtime }}</van-col>
                  <van-col class="colb" span="3">{{ jItem.testResult }}</van-col>
                </van-row>
              </div>
              <div v-else>
                <van-row class="tableLargeRow">
                  <van-col class="col" span="24">暂无数据</van-col>
                </van-row>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
        <div class="zjxx mt20">
          <div class="cardHead">
            <div>质检信息</div>
            <div class="btnBox">
              <div class="btn2" @click="addRow" v-has="'wait:qc'">添加行</div>
              <!-- <div class="btn2" v-has="'wait:qc'">填写尺寸表偏差</div> -->
            </div>
          </div>
          <div class="zjxxContent">
            <div style="overflow-x: auto">
              <div :class="isPad ? '' : 'noPadScroll'">
                <van-row class="tableRow tableHead">
                  <van-col class="col" span="2">序号</van-col>
                  <van-col class="col" span="6">问题描述</van-col>
                  <van-col class="col" span="4">数量</van-col>
                  <van-col class="col" :span="isPad ? '3' : '2'">百分比</van-col>
                  <van-col class="col" :span="isPad ? '6' : '7'">图片上传</van-col>
                  <van-col class="col" span="3">操作</van-col>
                </van-row>
                <div v-if="zjxxList.length != 0">
                  <van-row class="tableLargeRow" v-for="(zItem, zIndex) in zjxxList" :key="zIndex">
                    <van-col class="col" span="2">{{ zIndex + 1 }}</van-col>
                    <van-col class="col" span="6">
                      <div v-if="describe == 'qc:check'">{{ zItem.description }}</div>
                      <van-field v-model="zItem.description" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入" show-word-limit v-else />
                    </van-col>
                    <van-col class="col" span="4">
                      <div v-if="describe == 'qc:check'">{{ zItem.num }}</div>
                      <van-field v-model="zItem.num" type="digit" @input="changeSl($event, zIndex)" v-else />
                    </van-col>
                    <van-col class="col" :span="isPad ? '3' : '2'">{{ zItem.percent }}%</van-col>
                    <van-col class="col" :span="isPad ? '6' : '7'">
                      <van-uploader
                        multiple
                        type="file"
                        :max-count="10"
                        accept="image/*"
                        :after-read="
                          file => {
                            afterRead(file, zIndex)
                          }
                        "
                        :preview-options="{ closeable: true, onChange: resetTranf }"
                        v-model="zItem.fileList"
                        @close-preview="deleteBtn"
                        @click-preview="tranformImg"
                      />
                    </van-col>
                    <van-col class="col" span="3"><div class="btn2" @click="deleteRow(zIndex, zItem)" v-has="'wait:qc'">删除行</div></van-col>
                  </van-row>
                </div>
                <div v-else>
                  <van-row class="tableLargeRow">
                    <van-col class="col" span="24">暂无数据</van-col>
                  </van-row>
                </div>
              </div>
            </div>
            <div class="btnBox mt20 zjxxBottomBtnBox">
              <div class="btn2" :class="isPad ? '' : 'noPadBtn'" @click="saveZjxx" v-has="'wait:qc'">保存</div>
              <div class="btn2" :class="isPad ? '' : 'noPadBtn'" @click="submitZjxx" v-has="'wait:qc'">提交</div>
              <div class="btn2" :class="isPad ? '' : 'noPadBtn'" @click="sh('3')" v-has="'qc:check'">审核通过</div>
              <div class="btn2" :class="isPad ? '' : 'noPadBtn'" @click="sh('1')" v-has="'qc:check'">审核驳回</div>
            </div>
          </div>
        </div>
        <div class="pfxx mt20">
          <div class="cardHead">
            <div>批复信息</div>
          </div>
          <div class="pfxxContent">
            <div style="overflow-x: auto">
              <div :class="isPad ? '' : 'noPadScroll'">
                <van-row class="tableRow tableHead">
                  <van-col class="col" span="2">序号</van-col>
                  <van-col class="col" span="6">颜色</van-col>
                  <van-col class="col" span="4">审批状态</van-col>
                  <van-col class="col" span="4">是否扣款</van-col>
                  <van-col class="col" span="4">扣款金额</van-col>
                  <van-col class="col" span="6">备注</van-col>
                </van-row>
                <div v-if="pfxxTableList.length != 0">
                  <van-row class="tableLargeRow" v-for="(pItem, pIndex) in pfxxTableList" :key="pIndex">
                    <van-col class="col" span="2">{{ pIndex + 1 }}</van-col>
                    <van-col class="col" span="6" style="overflow-wrap: anywhere">{{ pItem.skc | skc }}</van-col>
                    <van-col class="col" span="4">
                      <van-field readonly clickable name="picker" :value="pItem.spztText" @click="selectValue('spzt', pIndex)" right-icon="arrow-down" />
                    </van-col>
                    <van-col class="col" span="4">
                      <van-field readonly clickable name="picker" :value="pItem.sfkkText" @click="selectValue('sskk', pIndex)" right-icon="arrow-down" />
                    </van-col>
                    <van-col class="col" span="4">
                      <van-field v-model="pItem.cutMoney" type="number" @input="handleInput($event, pItem)" />
                    </van-col>
                    <van-col class="col" span="6">
                      <van-field v-model="pItem.remark" rows="1" autosize type="textarea" maxlength="50" placeholder="请输入" show-word-limit />
                    </van-col>
                  </van-row>
                </div>
                <div v-else>
                  <van-row class="tableLargeRow">
                    <van-col class="col" span="24">暂无数据</van-col>
                  </van-row>
                </div>
              </div>
            </div>
            <div>
              <van-row class="mt20">
                <van-col class="col" :span="isPad ? 3 : 5">是否完结：</van-col>
                <van-col class="col" :span="isPad ? 9 : 4"><van-switch v-model="pfxxInfo.isDoneChecked" @change="onchange" /></van-col>
                <van-col class="col" :span="isPad ? 3 : 5">入库方式：</van-col>
                <van-col class="col" :span="isPad ? 9 : 10"
                  ><van-field readonly clickable name="picker" :value="pfxxInfo.putWayText" @click="selectrkfsValue('rkfs')" right-icon="arrow-down"
                /></van-col>
              </van-row>
            </div>
            <div>
              <van-row class="mt20">
                <van-col class="col" :span="isPad ? 3 : 5">带衣服：</van-col>
                <van-col class="col" :span="isPad ? 9 : 4"><van-switch v-model="pfxxInfo.takeClothChecked" /></van-col>
                <van-col class="col" :span="isPad ? 3 : 5">件检：</van-col>
                <van-col class="col" :span="isPad ? 9 : 10"><van-switch v-model="pfxxInfo.isSelectChecked" @change="changeJJ" /></van-col>
              </van-row>
            </div>
            <div>
              <van-row class="mt20">
                <van-col class="col" :span="isPad ? 3 : 5">备注：</van-col>
                <van-col class="col" :span="isPad ? 21 : 19"><van-field v-model="pfxxInfo.remarks" rows="1" autosize type="textarea" maxlength="50" placeholder="请输入" show-word-limit /></van-col>
              </van-row>
            </div>
            <div>
              <van-row class="mt20">
                <van-col class="col" :span="isPad ? 3 : 5">详细备注：</van-col>
                <van-col class="col" :span="isPad ? 21 : 19"
                  ><van-field v-model="pfxxInfo.description" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入" show-word-limit
                /></van-col>
              </van-row>
            </div>
            <div class="btnBox mt20 pfxxBtn">
              <div class="btn2" @click="submitPfxx" v-has="'process:qc'">提交</div>
              <div class="btn2" v-has="'process:qc'" @click="reject">驳回</div>
            </div>
            <van-popup v-model="showPicker" position="bottom">
              <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
            <van-popup v-model="rkfsShowPicker" position="bottom">
              <van-picker :columns="rkfsColumns" @change="rkfsPickerOnConfirm" @cancel="rkfsShowPicker = false">
                <template #option="option">
                  <div style="display: flex; flex-direction: column; align-items: center">
                    <div>{{ option.desc }}</div>
                  </div>
                </template>
              </van-picker>
            </van-popup>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import uploaderMixin from './components/mixin/ploaderMixin'
import * as dd from 'dingtalk-jsapi'
export default {
  mixins: [uploaderMixin],
  name: 'HomeIndex',
  components: {},
  props: {},
  data() {
    return {
      sessio: JSON.parse(sessionStorage.getItem('LOGIN_USER_BUTTON_AUTH')),
      id: '',
      hu: '',
      item: '',
      sfkkText: '',
      describe: '',
      showPicker: false,
      activeNames1: ['1'],
      activeNames2: ['1'],
      spxxInfo: {
        testInfos: []
      },
      zjxxList: [],
      checked: true,
      zjxxListRow: {
        description: '',
        num: '',
        percent: '0',
        fileList: []
      },
      pfxxTableList: [],
      pfxxInfo: [],
      rkfsColumns: [],
      showPicker: false,
      rkfsShowPicker: false,
      selectFlag: '',
      flag: false,
      selectIndex: '',
      isPad: true,
      columns: ['是', '否'],
      windowHeight: document.documentElement.clientHeight - 60, //实时屏幕高度
      windowWidth: document.documentElement.clientWidth
    }
  },
  computed: {},
  watch: {
    windowHeight(val) {
      let that = this
    },
    windowWidth(val) {
      let that = this
      if (val > 500) {
        that.isPad = true
      } else {
        that.isPad = false
      }
    },
    'pfxxInfo.isDoneChecked'(val, value) {
      if (val == true) {
        this.pfxxInfo.isDone = 1
      } else {
        this.pfxxInfo.isDone = 0
      }
    },
    'pfxxInfo.takeClothChecked'(val, value) {
      if (val == true) {
        this.pfxxInfo.takeCloth = 1
      } else {
        this.pfxxInfo.takeCloth = 0
      }
    },
    'pfxxInfo.isSelectChecked'(val, value) {
      if (val == true) {
        this.pfxxInfo.isSelect = 1
      } else {
        this.pfxxInfo.isSelect = 0
      }
    }
  },
  created() {
    this.id = this.$route.query.id
    this.readylinkid()
    this.getlist()
    this.onLoad()
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', ' background-color: #e5e9ed;')
  },
  mounted() {
    this.sessio.forEach(element => {
      this.describe = element.action
    })
    var that = this
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight - 60
        window.fullWidth = document.documentElement.clientWidth
        that.windowHeight = window.fullHeight // 高
        that.windowWidth = window.fullWidth
      })()
    }
    if (that.windowWidth > 500) {
      that.isPad = true
    } else {
      that.isPad = false
    }
  },
  filters: {
    formtime(val) {
      if (val != '') {
        const dt = new Date(val)
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, '0')
        const d = (dt.getDate() + '').padStart(2, '0')
        return `${y}-${m}-${d}`
      }
    },
    skc(val) {
      const skc = val.slice(9)
      return skc
    }
  },
  methods: {
    //获取code
    readylinkid() {
      if (dd.env.platform !== 'notInDingTalk') {
        let that = this
        //进行钉钉登录操作
        dd.ready(function () {
          dd.runtime.permission
            .requestAuthCode({
              corpId: 'ding8bac6beff1d2d841', // 企业id
              onSuccess: function (info) {
                let code = info.code // 通过该免登授权码可以获取用户身份
                that
                  .$http({
                    url: '/api/gateway/basemgt-emp/login/dingtalk',
                    method: 'post',
                    params: {
                      code: code,
                      agentId: '2547052682'
                    },
                    data: {
                      code: code,
                      agentId: '2547052682'
                    }
                  })
                  .then(data => {
                    if (data.success) {
                      localStorage.setItem('mobile', data.data.mobile)
                      localStorage.setItem('linkId', data.data.jobNumber)
                      this.getlist()
                    } else if (data.data == null) {
                      that.$toast(data.msg)
                    } else {
                      that.$toast(data.msg)
                    }
                  })
              },
              onFail: function (err) {}
            })
            .catch(err => {
              console.log(err)
            })
        })
      }
    },
    // 获取token
    getlist() {
      try {
        this.$http({
          url: '/api/gateway/jnby-authority/sys/phoneLogin',
          method: 'post',
          data: {
            mobile: localStorage.getItem('mobile')
            // mobile:'18367144343'
          }
        }).then(data => {
          if (data.success) {
            const token = data.result.token
            localStorage.setItem('token', data.result.token)
            Vue.ls.set(ACCESS_TOKEN, token, 7 * 24 * 60 * 60 * 1000)
            this.$store.dispatch('GetPermissionList')
          } else if (data.message == 'Token失效') {
            getlist()
          } else if (data.result == null) {
            this.$toast(data.message)
          }
        })
      } catch (error) {
        console.log(err)
      }
    },
    afterRead(file, index) {
      let that = this
      file.status = 'uploading'
      file.message = '上传中...'
      const data = new FormData()
      data.append('file', file.file)
      this.$http({
        url: '/api/gateway/basemgt-qc/qc/upload2Qny',
        method: 'post',
        data: data,
        headers: {
          linkId: localStorage.getItem('linkId'),
          mobile: localStorage.getItem('mobile'),
          // linkId:'11',
          // mobile:'18438363471',
          token: localStorage.getItem('token')
        }
      }).then(data => {
        if (data.success) {
          file.status = 'success'
          file.message = '上传成功'
          file.url = data.data
          // that.zjxxList[index].fileList.pop()
          // console.info(that.zjxxList[index].fileList)
          // that.zjxxList[index].fileList.push({ url: data.data, isImage: true })
          console.info(that.zjxxList[index].fileList)
        } else {
          file.status = 'failed'
          file.message = '上传失败'
        }
      })
    },

    changeJJ(val) {
      if (val == true) {
        this.pfxxInfo.isDone = 1
        this.pfxxInfo.isDoneChecked = true
        const value = {
          desc: '整款件检',
          type: 8
        }
        this.rkfsPickerOnConfirm('', value, '')
      }
    },
    onchange(val) {
      if (val == false) {
        this.pfxxInfo.isSelect = 0
        this.pfxxInfo.isSelectChecked = false
      }
    },
    //返回
    goBack() {
      this.$router.push({
        path: '/white/supplychain/chain',
        query: { position: this.$route.query.position }
      })
    },
    //入库方式选项确定方法
    rkfsPickerOnConfirm(picker, value, index) {
      if (value.type == '7' || value.desc == '部分入库') {
        //审批状态必须有一个否
        let count = 0
        this.pfxxTableList.forEach((item, index) => {
          if (item.type == 0) {
            count++
          }
        })
        if (count > 0) {
          this.pfxxInfo.putWayText = value.desc
          this.pfxxInfo.putWay = value.type
          this.rkfsShowPicker = false
        } else {
          Toast('选部分入库时审批状态必须有一个值为“否”')
        }
      } else {
        this.pfxxInfo.putWayText = value.desc
        this.pfxxInfo.putWay = value.type
        this.rkfsShowPicker = false
      }
    },
    selectrkfsValue() {
      this.rkfsShowPicker = true
    },
    selectValue(flag, index) {
      this.selectFlag = flag
      this.selectIndex = index
      this.showPicker = true
    },
    onConfirm(value) {
      console.log(value)
      if (this.selectFlag == 'spzt') {
        this.pfxxTableList[this.selectIndex].spztText = value
        this.pfxxTableList[this.selectIndex].type = value
        if (value == '是') {
          this.pfxxTableList[this.selectIndex].type = 1
          this.pfxxTableList[this.selectIndex].cutMoney = ''
        } else {
          this.pfxxTableList[this.selectIndex].type = 0
          this.pfxxTableList[this.selectIndex].cutMoney = ''
        }
      } else {
        this.pfxxTableList[this.selectIndex].sfkkText = value
        if (value == '是') {
          this.pfxxTableList[this.selectIndex].isCut = 1
          this.pfxxTableList[this.selectIndex].cutMoney = ''
        } else {
          this.pfxxTableList[this.selectIndex].isCut = 0
          this.pfxxTableList[this.selectIndex].cutMoney = ''
        }
      }
      this.showPicker = false
    },
    deleteRow(index, zItem) {
      if (zItem.id != undefined || zItem.id != '') {
        const data = new FormData()
        data.append('ids', zItem.id)
        let that = this
        this.$http({
          url: '/api/gateway/basemgt-qc/qcproblem/remove',
          method: 'post',
          data: data,
          headers: {
            linkId: localStorage.getItem('linkId'),
            mobile: localStorage.getItem('mobile'),
            // linkId:'11',
            // mobile:'18438363471',
            token: localStorage.getItem('token')
          }
        }).then(data => {
          if (data.msg == '操作失败') {
            console.log(data.msg)
          } else {
            Toast(data.msg)
          }
          that.onLoad()
        })
      } else {
        this.zjxxList.splice(index, 1)
        Toast('删除成功！')
      }
    },
    addRow() {
      this.zjxxList.push(JSON.parse(JSON.stringify(this.zjxxListRow)))
    },
    //保存质检信息
    saveZjxx(flag) {
      let that = this
      this.zjxxList.forEach(item => {
        item.productId = that.id
        item.picUrl = ''
        item.fileList.forEach(zitem => {
          item.picUrl = zitem.url + ',' + item.picUrl
        })
      })
      this.$http({
        url: '/api/gateway/basemgt-qc/qcproblem/saveOrUpdateBatch',
        method: 'post',
        data: this.zjxxList,
        headers: {
          linkId: localStorage.getItem('linkId'),
          mobile: localStorage.getItem('mobile'),
          // linkId:'11',
          // mobile:'18438363471',
          token: localStorage.getItem('token')
        }
      }).then(data => {
        if (flag == 'submit') {
          this.$http({
            url: '/api/gateway/basemgt-qc/qcproblem/submit',
            method: 'post',
            data: {
              productId: this.id
            },
            headers: {
              linkId: localStorage.getItem('linkId'),
              mobile: localStorage.getItem('mobile'),
              // linkId:'11',
              // mobile:'18438363471',
              token: localStorage.getItem('token')
            }
          }).then(data => {
            that.onLoad()
            if (data.code == 200) {
              this.$router.push({
                path: '/white/supplychain/chain',
                query: { position: this.$route.query.position }
              })
              Toast(data.msg)
            } else {
              Toast(data.msg)
            }
          })
        } else {
          that.onLoad()
          Toast(data.msg)
        }
      })
    },
    //审核
    sh(flag) {
      let that = this
      // const data = new FormData()
      //   data.append('productId', this.id)
      this.$http({
        url: '/api/gateway/basemgt-qc/qcproblem/verify',
        method: 'post',
        data: {
          productId: this.id,
          productStatus: flag
        },
        headers: {
          linkId: localStorage.getItem('linkId'),
          mobile: localStorage.getItem('mobile'),
          // linkId:'11',
          // mobile:'18438363471',
          token: localStorage.getItem('token')
        }
      }).then(data => {
        Toast(data.msg)
      })
    },
    //提交质检信息
    submitZjxx() {
      this.saveZjxx('submit')
    },
    handleInput(event, item) {
      if (event > 0 && event != null) {
        item.isCut = '1'
        item.sfkkText = '是'
        this.item = item.isCut
      } else if (event <= 0 && event != '') {
        item.isCut = '0'
        item.sfkkText = '否'
        item.cutMoney = ''
        return this.$toast('扣款金额需大于0')
      }
    },
    //批复信息提交
    submitPfxx() {
      let that = this
      let qcReplay = {
        productDetails: that.pfxxTableList,
        qcReplay: that.pfxxInfo
      }
      this.$http({
        url: '/api/gateway/basemgt-qc/qcreplay/update',
        method: 'post',
        data: qcReplay,
        headers: {
          linkId: localStorage.getItem('linkId'),
          mobile: localStorage.getItem('mobile'),
          // linkId:'11',
          // mobile:'18438363471',
          token: localStorage.getItem('token')
        }
      }).then(data => {
        if (data.success) {
          this.onLoad()
        }
        if (data.code == 200) {
          this.$router.push({
            path: '/white/supplychain/chain',
            query: { position: this.$route.query.position }
          })
          Toast(data.msg)
        } else {
          Toast(data.msg)
        }
      })
    },
    reject() {
      try {
        this.$http({
          url: '/api/gateway/basemgt-qc/qcreplay/refuse',
          method: 'post',
          data: {
            productId: this.id,
            productStatus: 103
          },
          headers: {
            linkId: localStorage.getItem('linkId'),
            mobile: localStorage.getItem('mobile'),
            // linkId:'11',
            // mobile:'18438363471',
            token: localStorage.getItem('token')
          }
        }).then(data => {
          Toast(data.msg)
        })
      } catch (error) {
        console.log(error)
      }
    },
    changeSl(val, index) {
      if (this.spxxInfo.totaliQty != '') {
        this.zjxxList[index].percent = (Number(val) / Number(this.spxxInfo.totaliQty)).toFixed(2) * 100
      } else {
        this.zjxxList[index].percent = (Number(val) / Number(0)).toFixed(2) * 100
      }
    },
    handleScroll(e) {
      let el = e.target
      //判断是否到达div容器底部
      if (el.scrollTop + el.clientHeight >= el.scrollHeight && !this.maxPage) {
        //控制页数
        this.current = this.current + 1
        //调用后台接口
        this.onLoad()
      }
    },
    onLoad() {
      this.getPfxx()
      this.getSpxx()
    },
    getSpxx() {
      let that = this
      this.$http({
        url: '/api/gateway/basemgt-qc/qc/productAndTestInfo',
        method: 'get',
        params: {
          id: this.id
        },
        headers: {
          linkId: localStorage.getItem('linkId'),
          mobile: localStorage.getItem('mobile'),
          // linkId:'11',
          // mobile:'18438363471',
          token: localStorage.getItem('token')
        }
      }).then(data => {
        that.spxxInfo = data.data
        that.getZjxx()
      })
    },
    getZjxx() {
      let that = this
      this.$http({
        url: '/api/gateway/basemgt-qc/qcproblem/list',
        method: 'get',
        params: {
          productId: this.id
        },
        headers: {
          linkId: localStorage.getItem('linkId'),
          mobile: localStorage.getItem('mobile'),
          // linkId:'11',
          // mobile:'18438363471',
          token: localStorage.getItem('token')
        }
      }).then(data => {
        data.data.records.forEach(item => {
          let arr = []
          item.fileList = []
          if (item.picUrl.indexOf(',') == -1 && item.picUrl != '') {
            arr.push(item.picUrl)
          } else {
            arr = item.picUrl.split(',')
            arr = arr.filter(item => {
              return item !== null && typeof item !== 'undefined' && item !== ''
            })
          }
          arr.forEach(zItem => {
            item.fileList.push({
              url: zItem,
              isImage: true
            })
          })
        })
        that.zjxxList = data.data.records
      })
    },
    getPfxx() {
      let that = this
      this.$http({
        url: '/api/gateway/basemgt-qc/qc/detailAndReplayInfo',
        method: 'get',
        params: {
          id: this.id
        },
        headers: {
          linkId: localStorage.getItem('linkId'),
          mobile: localStorage.getItem('mobile'),
          // linkId:'11',
          // mobile:'18438363471',
          token: localStorage.getItem('token')
        }
      }).then(data => {
        data.data.productDetails.forEach((item, index) => {
          if (item.type == 0) {
            item.spztText = '否'
          } else if (item.type == 1) {
            item.spztText = '是'
          }
          if (item.isCut == 0) {
            item.sfkkText = '否'
          } else if (item.isCut == 1) {
            item.sfkkText = '是'
          }
        })
        data.data.putWayType.forEach(item => {
          if (item.type == data.data.qcReplay.putWay) {
            data.data.qcReplay.putWayText = item.desc
          }
        })
        that.pfxxTableList = data.data.productDetails
        data.data.putWayType[9] = {
          desc: '空',
          type: 9
        }
        that.rkfsColumns = data.data.putWayType
        data.data.qcReplay.isDoneChecked = data.data.qcReplay.isDone == 1 ? true : false
        data.data.qcReplay.isSelectChecked = data.data.qcReplay.isSelect == 1 ? true : false
        data.data.qcReplay.takeClothChecked = data.data.qcReplay.takeCloth == 1 ? true : false
        that.pfxxInfo = data.data.qcReplay
      })
    }
  }
}
</script>
<style scoped lang="less">
.mt20 {
  margin-top: 20px;
}
.homee-container {
  padding-top: 10px;
  flex: 8;
}
/deep/.van-search__content {
  border-radius: 16px;
  width: 246px;
}
/deep/.noPad .van-search__action {
  color: white;
}
/deep/.noPad .van-collapse-item__content {
  min-width: 745px;
}
/deep/.van-collapse-item__wrapper {
  overflow-x: auto;
}
/deep/.van-field {
  border: 1px solid #cdcdcd;
}
/deep/.van-row {
  display: flex;
  align-items: center;
}
/deep/.van-cell {
  padding: 5px 10px !important;
}
/deep/.van-switch {
  width: 30px !important;
  height: 15px !important;
  font-size: 15px !important;
}
.home-container {
  position: relative;
  background-color: #0c7bea;
  width: 100%;
  height: 55px;
  .coontainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .inspection {
    font-size: 22px;
    color: white;
    font-weight: bold;
  }
}
.content {
  padding: 13px;
  color: #68696b !important;
  font-size: 16px;
  .row {
    margin-left: 20px;
    line-height: 30px;
    .infoTitle {
      text-align: left;
    }
  }
  .zjxx {
    .cardHead {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      padding: 10px 16px;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
    }
    .zjxxContent {
      padding: 12px 16px;
      color: #969799;
      font-size: 14px;
      line-height: 1.5;
      background-color: #fff;
      .zjxxBottomBtnBox {
        justify-content: flex-end;
      }
    }
  }
}
.btnBox {
  display: flex;
  .btn2 {
    margin-left: 20px;
  }
}
.pfxxBtn {
  justify-content: center;
  align-items: center;
}
.btn2 {
  padding: 0px 16px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0c7bea;
  color: #ffffff;
  border-radius: 8px;
}
.tableHead {
  color: #000000;
  background-color: #0c7bea24;
  border-top: 1px solid rgb(12 123 234) !important;
}
.tableRow {
  border: 1px solid rgb(12 123 234);
  border-top: 0px;
  border-right: 0px !important;
  text-align: center;
  height: 40px;
  .col {
    border-right: 1px solid rgb(12 123 234);
    height: 100%;
    display: flex;
    align-items: center;
    background-color: #e5ecfa;
    justify-content: center;
  }
}
.tableLargeRow {
  border: 1px solid rgb(12 123 234);
  border-top: 0px;
  border-right: 0px !important;
  text-align: center;
  display: flex;
  align-items: stretch; //重点  stretch
  .col {
    border-right: 1px solid rgb(12 123 234);
    // height: 100%;
    height: auto;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.pfxx {
  .cardHead {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
  }
  .pfxxContent {
    padding: 12px 16px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    .pfxxBottomBtnBox {
      justify-content: flex-end;
    }
  }
}
.btn3 {
  margin-left: 20px;
  width: 85px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  // border: 1px solid #0c7bea;
  background: #02a7f0;
  color: #ffffff;
  border-radius: 8px;
}
.noPadScroll {
  min-width: 745px;
}
.noPadBtn {
  margin-left: 13px !important;
  padding: 0px 8px !important;
  font-size: 12px !important;
}
/deep/.van-uploader__preview {
  margin: 0;
}
.colb {
  border-right: 1px solid rgb(12 123 234);
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  background-color: #ffffff;
  -ms-flex-pack: center;
  justify-content: center;
}
</style>
